<template>
	<view class="padlr24 padtb20">
		<view class="head-box h-320">
			<!-- <u--image
				:showLoading="true" 
				:src="getImg('index-bg')" 
				width="100%" 
				height="320rpx"
			></u--image> -->
		</view>
		<view class="store-info mar-t24">
			<view class="store-tit flex-a">
				<text class="mar-r10">爱美丽美容</text>
				<u-icon name="arrow-down" top="2" color="#111111" size="14rpx" bold></u-icon>
			</view>
			<view class="store-other mar-t20">
				<view class="flex">
					<view class="other-label">
						预约时间：
					</view>
					<view class="other-val">
						<text>09:00～21:30</text>
						<text class="other-status mar-l10">
							休息中
						</text>
					</view>

				</view>
				<view class="flex martb10">
					<view class="other-label">
						联系电话：
					</view>
					<view class="other-val">
						18376400921
					</view>
				</view>
				<view class="flex">
					<view class="other-label">
						门店地址：
					</view>
					<view class="other-val">
						浙江省温州市乐清市柳市镇翔来南路15号梅林花园15栋
					</view>
				</view>
			</view>
			
			<template v-if="bookstatu==0">
				<view class="flex flex-center mar-t24">
					<view class="bzdbtn flex flex-center">不指定美容师预约</view>
				</view>
				
				<view class="flex kyycss flex-col mar-t40">
					<view class="tittext mar-b24">可预约美容师</view>
					<view class="flex ju-bt mar-b24" v-for="item in 6">
						<view  class="flex flex-a">
							<u-image src="" width="108rpx" height="108rpx" radius="16"></u-image>
							<view class="nametext mar-l20">陈星雅</view>
						</view>
						<view class="btntext flex flex-center">
							预约
						</view>
					</view>
				</view>
			</template>
			
			
			<view class="" v-else>
				<beauticianList v-if="!selectBeauticianId" @onSelectBeautician="onSelectBeautician"></beauticianList>
				<itemList v-else></itemList>
			</view>

			
			<modalTips 
			:modalShow="popshow" 
			:showCancelButton="false" 
			:showConfirmButton="false"
			title=" "
			>
			<view class="tittext flex flex-center mar-b40 " slot="title">
				请选择上门/到家
			</view>
			<view class="modal-content pad-b40 mar-t32 pad-l8 pos-rel">
				<view class="popbox flex flex-col flex-center mar-b32">
					<!-- <view class="tittext flex flex-center mar-b40"></view> -->
					<view class="smbtn flex flex-center mar-b32" @click="bookstatu=1,popshow = false">上门</view>
					<view class="cencalbtn flex flex-center" @click="bookstatu=1,popshow = false">到家</view>
				</view>
				<view class="modal-close pos-abs"  @click="popshow = false">
						<u--image
							:showLoading="true" 
							:src="getImg('close-pop')" 
							width="64rpx"
							height="64rpx"
						></u--image>
				</view>
			</view>
			
			
		</modalTips>

		</view>
	</view>
</template>

<script>
	import beauticianList from "./components/beauticianList.vue"
	import itemList from "./components/itemList.vue";
	import modalTips from '@/components/modalTips/modalTips.vue';
	export default {
		components: {
			beauticianList,
			itemList,
			modalTips
		},
		data() {
			return {
				selectBeauticianId: "1",
				popshow: true,
				bookstatu:0
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.popshow = true
		},
		methods: {
			onSelectBeautician(beauticianId, serviceType) {
				this.selectBeauticianId = beauticianId;
				this.serviceType = serviceType;
				console.log(beauticianId, "beauticianId");
				console.log(serviceType, "serviceType");
			},
			onReservation() {
				uni.navigateTo({
					url: "/pages/subscribe/pages/reservationItem/reservationItem"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.store-info {
		.store-other {
			.other-label {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 33rpx;
				width: 20%;
			}

			.other-val {
				width: 80%;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 35rpx;
			}

			.other-status {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #0094FF;
				line-height: 33rpx;
			}
		}

		.store-tit {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			color: #111111;
			line-height: 42rpx;
		}
		
		.bzdbtn{
			width: 560rpx;
			height: 80rpx;
			background: linear-gradient( 135deg, #FF63AE 0%, #FF7171 100%);
			border-radius: 60rpx 60rpx 60rpx 60rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
		
		.kyycss{
			.tittext{
				width: 192rpx;
				height: 44rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
			.nametext{
				width: 84rpx;
				height: 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
			.btntext{
				width: 152rpx;
				height: 60rpx;
				background: #FF7171;
				border-radius: 42rpx 42rpx 42rpx 42rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}
		
		
	}

	.head-box {
		background-color: #f99;
	}

	.popbox {
		// width: 610rpx;
		// height: 380rpx;
		// background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.tittext {
			width: 240rpx;
			height: 44rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #111111;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.smbtn {
			width: 550rpx;
			height: 80rpx;
			background: #FFF1F5;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			border: 2rpx solid #FF7171;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #FF7171;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.cencalbtn {
			width: 550rpx;
			height: 80rpx;
			background: #F5F5F5;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #111111;
			text-align: left;
			font-style: normal;
			text-transform: none;

		}

	}
	
	.modal-content{
		.modal-close {
			bottom: -95rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
	
	/deep/ .u-modal {
		overflow: initial !important;
	}
	/deep/ .u-popup__content {
		overflow: initial !important;
	}
		
	
</style>
<style>
	page {
		background: #fff;
	}
</style>